<template>
  <div id="goodsdetails">
    <div class="header">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="gd in gs" :key="gd.id">
            <img :src="imgURL+gd.pics" alt>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="gd-name">
      <h1>伊利 金典纯牛奶 250ml*12 (新旧包装，随机发货）</h1>
    </div>
    <!-- 价格、数量选择 -->
    <div class="gd-price">
      <div class="gd-p">
        <div class="pri">
          <i>￥</i>
          <span>61.7</span>
        </div>
        <div class="num">
          <span class="bt1"></span>
          <span class="txt">1</span>
          <span class="bt2"></span>
        </div>
      </div>
    </div>
    <!-- app下载 -->
    <div class="app">
      <a href class="app-a">
        <img class="dog" src="../image/goodsdetails/good_activity_logo.png" alt>
        <span class="app-txt">
          <span class="sp1">100元大礼包</span>
          <span class="sp2">好券任你领，优惠享不停，下载APP可用</span>
        </span>
        <i></i>
      </a>
    </div>
    <!-- 地址 -->
    <div class="adress">
      <div class="ad1">
        <a href class="ad1-a">
          <i></i>
          <span>沃尔玛-新街口店</span>
        </a>
        <div class="xian"></div>
      </div>
      <div class="ad2">
        <a href class="ad2-a">
          <i></i>
          <span class="lx">联系商家</span>
        </a>
      </div>
    </div>
    <!-- 商品评价 -->
    <div class="evaluation">
      <div class="eval-a">
        <span class="aBox">
          <span class="a1">商品评价</span>
          <span class="a2">(共79人评价)</span>
        </span>
        <div class="eval-b">
          <div class="bBox1">
            <span class="b1"></span>
            <span class="b2"></span>
          </div>
          <span class="bBox2">好评100%</span>
        </div>
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="gg">商品详情</div>
    <!-- 具体介绍 -->
    <div class="pro">
      <img src="../image/goodsdetails/d5529aaaf54e676d.jpg" alt>
      <img src="../image/goodsdetails/0dc95351972af894.jpg" alt>
      <img src="../image/goodsdetails/3abc7c3b69c22da6.jpg" alt>
      <img src="../image/goodsdetails/2c6f53e4bb7c11a1.jpg" alt>
      <img src="../image/goodsdetails/a2900b61be28482c.jpg" alt>
      <img src="../image/goodsdetails/b1b9d77abcacefef.jpg" alt>
      <!-- 价格说明 -->
      <div class="price-instruction">
        <div class="ins-tt">价格说明</div>
        <p>
          <strong>划线价格：</strong>
          <span>划线的价格并非《中华人民共和国价格法》及《禁止价格欺诈行为的规定》等相关法律法规中所指商品“原价”的含义，仅为到家平台商家处商品的供应商指导价或建议零售价，</span>
          <strong>并非商品原价。</strong>
        </p>
        <p>
          <strong>未划线价格：</strong>
          <span>未划线的价格指该商家处商品在京东到家平台实时标价，具体成交价格根据商品参加的活动，或者您使用优惠券等发生变化，最终以订单结算页面价格为准。</span>
        </p>
      </div>
    </div>
    <Car></Car>
  </div>
</template>
<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      gs: [],
    };
  },
  created() {
    this.getgs();
  },
  pagination: {
    el: ".swiper-pagination"
  },
  methods: {
    initSwiper() {
      if (this.swiper != null) return;
      this.swiper = new Swiper(".swiper-container", {
        loop: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper

        pagination: {
          el: ".swiper-pagination",
          // dynamicBullets: true,
          type: "fraction",
          
        }
      });
    },
    getgs() {
      this.axios
        .get("/gs")
        .then(ret => {
          let { data, error } = ret.data;
          this.gs = data;
          this.$nextTick(() => {
            // 下一个UI帧再初始化swiper
            this.initSwiper();
          });
        })
        .catch();
    }
  },
};
</script>
<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  font-style: normal;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
#goodsdetails {
 
  background-color: #eee;
  .header {
    position: relative;
    height: 100%;
    .swiper-container {
      .swiper-slide {
        img {
          width: 100%;
          height: auto;
        }
      }
    }
    .header-ico {
      background-color: rgba(0, 0, 0, 0.4);
      height: 48px;
      width: 100px;
      line-height: 48px;
      text-align: center;
      color: #ffffff;
      font-size: 30px;
      border-radius: 20px;
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
  //商品名称
  .gd-name {
    background-color: #fff;
    height: 100%;
    h1 {
      font-size: 36px;
      padding: 0px 20px;
      margin: 20px 0 10px;
      color: #333;
      height: 92px;
      line-height: 48px;
      font-weight: 700;
    }
  }
  //商品价格
  .gd-price {
    background: #fff;
    padding: 20px 20px 0 20px;
    .gd-p {
      display: flex;
      justify-content: space-between;
      .pri {
        font-size: 36px;
        line-height: 56px;
        padding-right: 10px;
        color: #ff3434;
      }
      .num {
        span {
          display: block;
          width: 56px;
          height: 56px;
          line-height: 56px;
          text-align: center;
          font-size: 30px;
          float: left;
        }
        .bt1 {
          background: url(../image/shopdetails/addNumSprite.png) no-repeat;
          background-position: -84px 0;
          background-size: 223px 55px;
        }
        .bt2 {
          background: url(../image/shopdetails/addNumSprite.png) no-repeat;
          background-size: 223px 55px;
        }
      }
    }
  }
  // 下载app
  .app {
    .app-a {
      color: #555;
      display: block;
      padding: 30px 20px;
      background: #fff;
      position: relative;
      display: flex;
      .dog {
        margin-top: 8px;
        width: 74px;
        height: 74px;
        //float: left;
        position: absolute;
      }
      .app-txt {
        margin: 0px 96px;
        line-height: 37px;
        .sp1 {
          display: block;
          font-size: 30px;
          color: #333;
          width: 100%;
          margin-top: 8px;
        }
        .sp2 {
          margin-top: 8px;
          font-size: 26px;
          color: #666666;
          width: 100%;
        }
      }
      i {
        display: block;
        width: 32px;
        height: 40px;
        // border:1px solid red;
        background: url(../image/goodsdetails/good_Detail_Icon.png) no-repeat;
        background-size: 400px 300px;
        background-position: 11px -35px;
        margin-top: 8px;
      }
    }
  }
  // 地址
  .adress {
    background: #fff;
    height: 100px;
    font-size: 30px;
    color: #333333;
    margin: 20px 0px 0px 0px;
    display: flex;
    justify-content: space-between;
    .ad1 {
      text-align: left;
      padding-left: 20px;
      position: relative;
      width: 60%;
      a {
        display: block;
        line-height: 100px;
      }
      i {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url(../image/goodsdetails/index_moreStore.png) no-repeat
          center;
        position: absolute;
        background-size: 23px 23px;
        top: 30px;
      }
      span {
        padding-left: 50px;
        width: 100%;
        color: #333333;
      }
      div {
        width: 2px;
        height: 40px;
        border-right: 1px solid #d9d9d9;
        position: absolute;
        top: 30px;
        right: 0;
      }
    }
    .ad2 {
      height: 100px;
      line-height: 100px;
      width: 40%;
      position: relative;
      a {
        text-align: right;
        padding-right: 20px;
        display: block;
        line-height: 100px;
      }
      i {
        height: 40px;
        width: 40px;
        display: inline-block;
        margin-top: 28px;
        background: url(../image/goodsdetails/good_Detail_Icon.png) no-repeat -45px
          5px;
        background-size: 400px 300px;
        position: absolute;
        right: 140px;
        top: 3px;
      }
      .lx {
        display: inline-block;
        color: #666;
      }
    }
  }
  // 评价
  .evaluation {
    padding: 0px 20px;
    font-size: 30px;
    color: #333333;
    margin: 0 0 20px 0;
    line-height: 100px;
    background-color: #fff;

    .eval-a {
      border-top: 1px solid #999;
      width: 100%;
      height: 100%;
      .aBox {
        .a2 {
          color: #999999;
          font-size: 24px;
          padding-left: 8px;
        }
      }
    }
    .eval-b {
      margin-top: 20px;
      padding-bottom: 40px;
      height: 6px;
      position: relative;
      .bBox1 {
        position: relative;
        margin-right: 140px;
        height: 6px;
        border-radius: 3px;
        .b1 {
          display: inline-block;
          height: 6px;
          width: 100%;
          border-radius: 3px;
          background-color: #47b34f;
          position: absolute;
          top: 0px;
        }
        .b2 {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 10px;
          border: 6px solid #47b34f;
          position: absolute;
          top: -8px;
          right: -18px;
        }
      }
      .bBox2 {
        color: #47b34f;
        display: block;
        position: absolute;
        font-size: 24px;
        //z-index: 5;
        top: -50px;
        right: 0px;
      }
    }
  }
  // 商品详情
  .gg {
    padding: 0px 20px;
    font-size: 30px;
    color: #333;
    background: #fff;
    line-height: 100px;
  }
  //图片介绍
  .pro {
    padding: 0px 20px 20px 20px;
    background: #fff;
    img {
      width: 100%;
    }
    .price-instruction {
      margin-top: 20px;
      .ins-tt {
        color: #333333;
        font-size: 30px;
        margin-bottom: 20px;
        text-align: left;
      }
      p {
        font-size: 24px;
        color: #333333;
        line-height: 34px;
      }
      p:nth-of-type(1) {
        margin-bottom: 20px;
      }
    }
  }
}
</style>


